<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="/js/ranking.js"></script>
    <script src="/js/top.js"></script>
    <script src="/sign/js/sign.js"></script>
<!--    https://www.yidepiao.com/movie/4596 -->
</head>
<body>
<div id="app">
    <el-container>
        <top></top>
        <el-main>
            <div class="c900">
                <el-row :gutter="10">
                    <el-col :span="17">
                        <el-card>
                            <el-tabs type="card" value="first">
                                <el-tab-pane name="first">
                                    <span slot="label"><el-badge :value="onmovies.total" class="item">正在热映</el-badge></span>
                                    <el-card style="overflow:auto">
                                        <div v-infinite-scroll="queryNext" infinite-scroll-delay="500" style="height: 540px; overflow:auto">
                                            <div v-for="m in onmovies.records">
                                                <el-row :gutter="10" >
                                                    <el-col span="6">
                                                        <a :href=`detail.html?id=${m.id}`><img :src="m.img"></a>
                                                    </el-col>
                                                    <el-col span="18">
                                                        <h1 style="margin: 0px">{{m.name}}</h1>
                                                        <el-rate :value="4"></el-rate>
                                                        <div class="grid2 detail">
                                                            <label>上映时间：</label><time>{{m.time}}</time>
                                                            <label>地区：</label><span>{{m.area}}</span>
                                                            <label>类型：</label><span>{{m.type}}</span>
                                                            <label>导演：</label><span>{{m.director}}</span>
                                                            <label>主演：</label>
                                                            <span v-if="m.actor.length>30">
                                                            {{m.actor.substring(0,30)}}....
                                                            </span>
                                                            <span v-else>{{m.actor}}</span>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-tab-pane>
                                <el-tab-pane name="second">
                                    <span slot="label"><el-badge :value="wonmovies.total" class="item" type="warning">即将上映</el-badge></span>
                                    <el-card  >
                                        <div v-infinite-scroll="queryNextwon" infinite-scroll-delay="600"
                                             :infinite-scroll-distance="200" style="height: 540px; overflow:auto">
                                            <div v-for="n in wonmovies.records">
                                                <el-row :gutter="10" >
                                                    <el-col span="6">
                                                        <a :href=`detail.html?id=${n.id}`><img :src="n.img"></a>
                                                    </el-col>
                                                    <el-col span="18">
                                                        <h1 style="margin: 0px">{{n.name}}</h1>
                                                        <el-rate :value="4"></el-rate>
                                                        <div class="grid2 detail">
                                                            <label>上映时间：</label><time>{{n.time}}</time>
                                                            <label>地区：</label><span>{{n.area}}</span>
                                                            <label>类型：</label><span>{{n.type}}</span>
                                                            <label>导演：</label><span>{{n.director}}</span>
                                                            <label>主演：</label>
                                                            <span v-if="n.actor.length>30">
                                                            {{n.actor.substring(0,30)}}....
                                                            </span>
                                                            <span v-else>{{n.actor}}</span>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </el-col>
                    <el-col :span="7">
                        <ranking></ranking>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            where:{name:'',status:0},
            wiwhere:{status:0},
            img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.lCw8yzAgcesQi0fdACCG1wHaLM?w=198&h=299&c=7&r=0&o=5&pid=1.7',
            onmovies:{current:1,size:8,records:[]},
            wonmovies:{current:1,size:8,records:[]},
            fivemovie:{}
        },
        created(){
            this.queryMoviesOn();
            this.queryMoviesWOn();
        },
        methods:{
            queryMoviesOn(){
                this.where.status = 2;
                axios.post(`movie/queryMovies?current=${this.onmovies.current}&size=${this.onmovies.size}`,this.where).then(res=>{
                    console.log(res.data)
                    if(this.onmovies.current == 1){
                        this.onmovies = res.data;
                    }else {
                        let oldrecords = this.onmovies.records;
                        this.onmovies = res.data;
                        oldrecords = oldrecords.concat(this.onmovies.records);
                        this.onmovies.records = oldrecords;
                    }
                })
            },
            queryMoviesWOn(){
                this.wiwhere.status = 1;
                axios.post(`movie/queryMovies?current=${this.wonmovies.current}&size=${this.wonmovies.size}`,this.wiwhere).then(res=>{
                    console.log(res.data);
                    if(this.wonmovies.current == 1){
                        this.wonmovies = res.data;
                    }else {
                        let oldrecords = this.wonmovies.records;
                        this.wonmovies = res.data;
                        oldrecords = oldrecords.concat(this.wonmovies.records);
                        this.wonmovies.records = oldrecords;
                    }
                })
            },
            queryNext(){
                if(this.onmovies.pages && this.onmovies.current < this.onmovies.pages){
                    this.onmovies.current++;
                    this.queryMoviesOn();
                }
            },
            queryNextwon(){
                if(this.wonmovies.pages && this.wonmovies.current < this.wonmovies.pages){
                    this.wonmovies.current++;
                    console.log(this.wonmovies.current)
                    this.queryMoviesWOn();
                }
            },
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .detail{
        color:#666;
        font-size: .8em;
        gap:5px;
        margin-block: 10px;
    }
    .detail>label{
        color:#999
    }
    table a{
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        background-color: #00A0D1;
    }
    td{
        height: 50px;
    }
    td>p{
        margin: 0px;
    }
    .table_1 {
        height: 37px;
        line-height: 37px;
        background: #dff0f5;
        border: 1px #ccc solid;
        text-align: center;
        font-weight: bold;
        color: #444;
    }
    .ctrtitle{
        margin: 10px;
    }
    .ctrtitle>em{
        margin: 20px;
        font-size: .7em;
    }
    .payend{
        margin-bottom: 50px;
        background-color: #e7e4e0;
        font-size: .8em;
        color: #999;
        padding: 10px;
    }
    .el-badge__content.is-fixed{
        transform: translateY(-10%) translateX(100%);
    }
    .el-icon-search{
        color: #666;
    }
    #name{
        color: #444444;
    }

</style>

</html>